<template>
	<view class="box1">
		<!-- 轮播图 -->
		<swiper class="swiper" 
		:circular="true" 
		:indicator-dots="true" 
		indicator-color="#fff" 
		indicator-active-color="#8B0000" 
		:autoplay="true"
		v-if="banner <0">
			<swiper-item class="swiper-item" v-for="(item, index) in banner" :key="item.id">
				<image class="swiper-item-img" :src="item.img_url"></image>
			</swiper-item>
		</swiper>
		 <!-- 30天无忧退货 -->
		<view class="sst">
			<view class="txt">
				<u-icon name="checkmark-circle-fill" 
				color="#8B0000" 
				size="26rpx"
				class="bj"></u-icon>
				<view class="txt1">
					30天无忧退货
				</view>
			</view>
			<view class="txt">
				<u-icon name="checkmark-circle-fill"
				color="#8B0000" 
				size="26rpx"
				class="bj"></u-icon>
				<view class="txt1">
					48小时快速退费
				</view>
			</view>
			<view class="txt">
				<u-icon name="checkmark-circle-fill"
				color="#8B0000" 
				size="26rpx"
				class="bj"></u-icon>
				<view class="txt1">
					满88元免邮费
				</view>
			</view>
		</view>
		<!-- 标题，价钱 -->
		<view class="box2">
			<!-- 标题 -->
			<view class="bt">
				<!-- 商品标题 -->
				<h2>{{arr.name}}</h2>
				<!-- 商品叙述 -->
				<view class="xs">
					{{arr.goods_brief}}
				</view>
				<!-- 价格 -->
				<view class="jg">
					{{arr.retail_price | num}}
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="tcc" @tap="zzc">
			
			<view class="txt2">
				展示弹出层
			</view>
			<u-icon name="arrow-right" color="#B49F99" size="32rpx"></u-icon>
		</view>
		<!-- 商品参数 -->
		<view class="spcs">
			<h2>商品参数</h2>
			<view class="cs" v-for="(item,index) in arr1" :key="index">
				<view class="txt3">
					{{item.name}}
				</view>
				<view class="txt4">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 商品介绍 -->
		<view class="spjs" v-html="arr2">
		</view>
		<!-- 常见问题 -->
		<view class="cjwt">
			<!-- 常见问题的标题 -->
			<view class="cjwt1">
				<!-- 两条杆 -->
				<text class="ltg"></text>
				<h3>常见问题</h3>
			</view>
			<view class="wt">
				<view class="wt1" v-for="(item,index) in arr3" :key="index">
					<view class="wt2">
						{{item.question}}
					</view>
					<view class="wt3">
						{{item.answer}}
					</view>
				</view>
				
			</view>
		</view>
		<!-- 相关产品 -->
		<view class="xgcp">
			<!-- 标题 -->
			<view class="xgcp1">
				<!-- 两条杆 -->
				<text class="ltg"></text>
				<h3>相关产品</h3>
			</view>
			<!-- 空白隔开 -->
			<view class="kb"></view>
			<!-- 产品列表 -->
			<view class="cplb">
				<view class="cp1">
					<view class="cp2" v-for="item in arr4" :key="item.id" @tap="tzxq" :data-id="item.id">
						<image class="cp3" :src="item.list_pic_url" mode="widthFix" />
						<view class="cp4">{{ item.name }}</view>
						<view class="cp5">{{ item.retail_price | num }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加入购物车 -->
		<view class="gwc">
			<!-- 收藏 -->
			<view class="sc">
				<u-icon name="star" size="36rpx"></u-icon>
				<view class="sc1">
					收藏
				</view>
			</view>
			<!-- 购物车 -->
			<view class="gwc1">
				<!-- 微标签 -->
					<u-badge class="wbq" numberType="ellipsis" :type="type" max="99" :value="value"></u-badge>
				<u-icon name="shopping-cart" size="36rpx"></u-icon>
				<view class="gwc2">
					购物车
				</view>
			</view>
			<!-- 购买和加入 -->
			<view class="gmjr">
				<u-button text="立即购买" class="custom-style" color="linear-gradient(to right, rgb(252,82,49), rgb(240,20,38))">
					
				</u-button>
					
				<u-button @tap="jrgwc" text="加入购物车" class="jrgwc" color="linear-gradient(to right, rgb(255,199,30), rgb(255,144,24))">
					
				</u-button>
			</view>
			
		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="show" @tap="zzc1" zIndex="98">
		</u-overlay>
		<!-- 加入购物车的数量 -->
		<view class="sl" v-show="show">
			<!-- 上面 -->
			<view class="sm">
				<image :src="arr.list_pic_url" mode=""></image>
				<!-- 库存 -->
				<view class="kc">
					<view class="kc1">
						价格：{{arr.retail_price | num}}
					</view>
					<view class="kc1">
						库存：{{arr.goods_number}}
					</view>
				</view>
			</view>
			<!-- 步进器 -->
			<view class="bjq">
				<view class="sl1">
					数量：
				</view>
				<u-number-box v-model="bjval" :disabledInput="true" @change="bjchange"></u-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	import {xpxqy,xgcp,gwcbjq} from '../../utils/api.js'
	export default {
		data() {
			return {
				// 微标签
				type:"error",
				value:1,
				// 遮罩层
				show: false,
				// 轮播图
				banner:[],
				// 详情
				arr:[],
				// 商品参数
				arr1:[],
				// 商品介绍
				arr2:[],
				// 问题
				arr3:[],
				// 相关产品
				arr4:[],
				// 步进器
				bjval:1
			}
		},
		// 过滤
		filters:{
			num(val){
				// 过滤价格
				const gl = '￥ '+parseFloat(val).toFixed(2)+' 元'
				return gl
			}
		},
		methods: {
			// 打开遮罩层
			zzc(){
				this.show=true
			},
			// 关闭遮罩层
			zzc1(){
				this.show=false
			},
			// 相关产品跳转
			tzxq(e){
				uni.navigateTo({
					url:'../xpxqy/xpxqy?id='+e.currentTarget.dataset.id,
				})
			},
			// 加入购物车
			jrgwc(){
				this.show=true;
			},
			// 步进器
			bjchange(){
				console.log(this.bjval+1);
			}
		},
		async onLoad(option){
			// 新品详情页发请求
			let res = await xpxqy({
				id:option.id
			})
			this.banner=res.data.gallery;
			this.arr=res.data.info;
			this.arr1=res.data.attribute;

			// 使用正则设置富文本的样式
			this.arr2=res.data.info.goods_desc.replace(
					  /\<p/g,
					  "<p class='p1'"
			);
			this.arr3=res.data.issue;

			// 相关产品请求
			let res1 = await xgcp({
				id:option.id
			});
			this.arr4=res1.data.goodsList
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #EFEFEF;
	}
	.box1{
		// 轮播图
		.swiper{
			width: 100%;
			height: 750rpx;
			
			.swiper-item{
				width: 100%;
				
				image{
					width: 100%;
					height: 750rpx;
				}
			}
		}
		// 30天
		.sst{
			display: flex;
			background-color: #EFEFEF;
			.txt{
				display: flex;
				height: 60rpx;
				width: 33.333%;
				justify-content: center;
				align-items: center;
				
				// 图标右外边距
				.bj{
					margin-right: 8rpx;
				}
				// 字体大小
				.txt1{
					padding-bottom: 2rpx;
					font-size: 26rpx;
					font-family: "黑体";
				}
			}
		}
		// 标题，价钱
		.box2{
			-webkit-tap-highlight-color: transparent;
			color: #333;
			margin: 0;
			border: 0;
			font: inherit;
			vertical-align: baseline;
			background: #fff;
			text-align: center;
			line-height: 80rpx;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #ccc;
			font-family: "黑体";
				
				h2{
					-webkit-tap-highlight-color: transparent;
					color: #333;
					text-align: center;
					margin: 0;
					padding: 0;
					border: 0;
					font: inherit;
					vertical-align: baseline;
					font-size: 40rpx;
				}
				
				.xs{
					-webkit-tap-highlight-color: transparent;
					color: #333;
					text-align: center;
					margin: 0;
					padding: 0;
					border: 0;
					font: inherit;
					vertical-align: baseline;
					display: block;
					font-size: 28rpx;
				}
				.jg{
					-webkit-tap-highlight-color: transparent;
					text-align: center;
					margin: 0;
					padding: 0;
					border: 0;
					font: inherit;
					vertical-align: baseline;
					color: darkred;
					font-size: 28rpx;
				}
		}
		//弹出层
		.tcc{
			background-color: #fff;
			display: flex;
			padding: 20rpx 32rpx;
			justify-content: space-between;
			margin-bottom: 40rpx;
			align-items: center;
			.txt2{
				line-height: 48rpx;
				height: 48rpx;
				font-size: 28rpx;
				font-family: "黑体";
				width: 646rpx;
			}
		}
		// 商品参数
		.spcs{
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			h2{
				-webkit-tap-highlight-color: transparent;
				color: #333;
				margin: 0;
				padding: 0;
				border: 0;
				font: inherit;
				vertical-align: baseline;
				font-size: 40rpx;
				line-height: 80rpx;
			}
			.cs{
				width: 100%;
				height: 60rpx;
				font-family: "黑体";
				display: flex;
				background-color: #EFEFEF;
				align-items: center;
				margin-bottom: 10rpx;
				border-radius: 6px;
				.txt3{
					color: #999;
					width: 24%;
					margin-right: 10rpx;
					text-align: right;
					font-size: 28rpx;
				}
				.txt4{
					flex: 1;
					font-size: 28rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
		// 商品介绍
		.spjs{
			width: 100%;
			background-color: #fff;
		}
		// 常见问题
		.cjwt{
			width: 100%;
			height: 630rpx;
			background-color: #fff;
			margin-top: 20rpx;
			.cjwt1{
				    width: 100%;
				    height: 80rpx;
				    position: relative;
				    font-size: 36rpx;
				    background: #fff;
				h3{
					-webkit-tap-highlight-color: transparent;
					color: #333;
					padding: 0;
					border: 0;
					font: inherit;
					vertical-align: baseline;
					width: 30%;
					height: 80rpx;
					background: #fff;
					position: absolute;
					text-align: center;
					line-height: 80rpx;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					font-family: "黑体";
				}
				// 两条杆
				.ltg{
					width: 50%;
					height: 4rpx;
					background: #ccc;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}
			// 问答
			.wt{
				.wt1{
					height: 136rpx;
					.wt2{
						padding-left: 40rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 32rpx;
						position: relative;
						padding-right: 20rpx;
						font-family: '黑体';
						&::before{
							content: '';
							width: 8rpx;
							height: 8rpx;
							background-color:#8B0000 ;
							border-radius: 50%;
							position: absolute;
							left: 16rpx;
							top: 50%;
						}
					}
					.wt3{
						font-size: 28rpx;
						font-family: '黑体';
						padding: 0 20rpx 0 40rpx;
						color: #666666;
					}
				}
			}
		}
		// 相关产品
		.xgcp{
			
			width: 100%;
			background-color: #fff;
			.xgcp1{
				    width: 100%;
				    height: 80rpx;
				    position: relative;
				    font-size: 36rpx;
				    background: #fff;
				h3{
					-webkit-tap-highlight-color: transparent;
					color: #333;
					padding: 0;
					border: 0;
					font: inherit;
					vertical-align: baseline;
					width: 30%;
					height: 80rpx;
					background: #fff;
					position: absolute;
					text-align: center;
					line-height: 80rpx;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					font-family: "黑体";
				}
				// 两条杆
				.ltg{
					width: 50%;
					height: 4rpx;
					background: #ccc;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}
			// 空白隔开
			.kb{
				height: 100rpx;
			}
			// 相关产品列表
			.cp1 {
					padding: 20rpx;
					display: grid;
					grid-template-columns: 1fr 1fr;
					// grid-template-rows: 480rpx 480rpx;
					grid-auto-rows: 480rpx;
					gap: 15rpx;
					.cp2 {
						.cp3 {
							width: 100%;
						}
						.cp4 {
							font-size: 28rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: "黑体";
						}
						.cp5 {
							margin-top: 14rpx;
							font-size: 28rpx;
							color: #8B0000;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: "黑体";
						}
					}
			}
		}
		// 购物车
		.gwc{
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			z-index: 99;
			// 收藏
			.sc{
				width: 96rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #646566;
				.sc1{
					font-size: 24rpx;
					font-family: '黑体';
				}
			}
			.gwc1{
				width: 96rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #646566;
				position: relative;
				margin-right: 8rpx;
				
				.wbq{
					position: absolute;
					right: 4rpx;
					top: 4rpx;
				}
				.gwc2{
					font-size: 24rpx;
					font-family: '黑体';
				}
			}
			.gmjr{
				display: flex;
				.custom-style{
					width: 268rpx;
					height: 80rpx;
					border-radius: 40rpx 0 0 40rpx;
				}
				.jrgwc{
					width: 268rpx;
					height: 80rpx;
					border-radius: 0 40rpx 40rpx 0;
					
				}
			}
		}
		.sl{
			width: 100%;
			box-sizing: border-box;
			height: 486rpx;
			background-color: #fff;
			z-index: 99;
			position: fixed;
			bottom: 100rpx;
			padding: 20rpx;
			.sm{
				display: flex;
				image{
					width: 200rpx;
					height: 200rpx;
				}
				.kc{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 10px;
					.kc1{
						color: #000;
						font-size: 28rpx;
						font-family: "黑体";
					}
				}
			}
			// 步进器
			.bjq{
				.sl1{
					font-size: 40rpx;
					font-family: "黑体";
					margin: 40rpx 0;
				}
			}
		}
	
	}
	
	// 富文本的样式要用/deep/开头才可以，这是我琢磨我一个多小时解决的
	/deep/.p1{
		width: 750rpx;
		// height: 200rpx;
		
		img{
			width: 750rpx;
			vertical-align: baseline;
			display: block;
		}
		&:nth-last-child(1){
			background-color: #EFEFEF;
		}
	}
</style>
